<!DOCTYPE html>
<html>
  <head>
    <title>DIV水平垂直居中 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
        body {
            font-size: 12px;
            font-family: tahoma;
            margin: 10px;
            padding:0;
        }
 
        .box {
            border: 1px solid #f09;
            background-color: #fcf;
            width: 520px;
            height: 360px;
            position: relative;
            overflow: hidden;
        }
 
        .sub-box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: auto;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
 
        .con {
            *position: relative; 　　/* 星号兼容 IE6/IE6 */
            *top: -50%;
            *left: -50%;
            margin: -50% 50% -50% -50% \0; 　　/*兼容IE8（IE9也受影响，在下面处理掉IE9）*/
            border: solid 1px #f00;
        }
        :root .con {
            margin: auto;　　/*兼容处理IE9*/
        }
</style>
  </head>
  <body>
    <div id="ver"></div>
    <div class="box">
	  <div class="sub-box">
		<div class="con">
		  DIV垂直居中<br />
		  水平居中、垂直居中<br />
		  水平居中、垂直居中<br />
		  水平居中、垂直居中<br />
		  水平居中、垂直居中<br />
		  水平居中、垂直居中<br />
		  水平居中、垂直居中
		</div>
	  </div>
    </div>
  </body>
</html>
<script type="text/javascript">
  //显示浏览器版本
    document.getElementById('ver').innerHTML = navigator.userAgent;
	alert(document.body);
</script>
